<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="layui/layui.js"></script>
</head>

<body>

	<!-- 查询表单 -->
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">输入框</label>
			<div class="layui-input-inline">
				<input type="text" name="id" required lay-verify="required"
					placeholder="请输入卡号" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">单选框</label>
			<div class="layui-input-block">
				<input type="radio" name="type" value="0" title="学生" checked>
				<input type="radio" name="type" value="1" title="教师">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

	<!-- 添加的弹窗 -->
	<div id="tianjiachuang" style="display: none">
		<form class="layui-form" onsubmit="return false" id="tianjiaForm"
			lay-filter="tianjiaForm">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">名字</label>
				<div class="layui-input-inline">
					<input type="text" name="ename" placeholder="请输入"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男"> <input
						type="radio" name="sex" value="女" title="女" checked>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="tianjiabtn">添加提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

	<script>
		//Demo
		layui.use('form', function() {
			var form = layui.form;
			var $ = layui.$;
			var layer = layui.layer;

			//监听提交
			form.on('submit(formDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				$.post("getInfoById",data.field,function(res){
					console.log(res.data)
					if(res.date!=0){
						form.val("tianjiaForm",res.data);
							//弹窗
							layer.open({
								type : 1,
								area : [ '800px', '600px' ],
								shadeClose:true,
								content : $('#tianjiachuang')
							});
						}
				},"json");
				
				
				return false;
			})
			
		});
	</script>
</body>

</html>